<template>
  <view>
    <nav-bar title="支付订单" backgroundColor="#115BAA" titleColor="#FFF"></nav-bar>
    <view class="total-amount">
      <view class="text">订单总金额</view>
      <view class="amount">
        <text class="amount-icon">￥</text>{{ payParams.totalAmount || '' }}
      </view>
    </view>
    <view class="pay-type">
      <view class="type-item">
        <view class="icon">
          <image class="img" :src="baseIconUrl + '/commonIcon/icon_wechat_pay.png'" />
        </view>
        <view class="type-name">微信支付</view>
        <view class="choose-icon">
          <uni-icons type="checkbox" size="26" color="#999"></uni-icons>
        </view>
      </view>
    </view>
    <view class="form_bottom_btn">
      <view class="btn-box">
        <view class="confirm" @click="clickConfirmPay">确认支付</view>
      </view>
    </view>
  </view>
</template>

<script>
  import api_common from '@/api/common'
  import { baseIconUrl } from '@/config'
  export default {
    name: 'OrderPay',
    data() {
      return {
        baseIconUrl,
        payParams: {}
      }
    },
    onLoad(options) {
      this.payParams = JSON.parse(decodeURIComponent(options.payParams))
    },
    methods: {
      clickConfirmPay() {
        const params = {
          ...this.payParams,
          totalAmount: null
        }
        api_common.fetchPayParams(params).then(res => {
          if (res.code !== 200) return
          const resParams = {
            timeStamp: res.data.data.timestamp,
            nonceStr: res.data.data.nonceStr,
            package: res.data.data.package,
            signType: res.data.data.signType,
            paySign: res.data.data.paySign
          }
          // 调用微信小程序的支付接口
          uni.requestPayment({
            ...resParams,
            success(res) {
              // 支付成功的回调
              uni.showToast({
                title: '支付成功！',
                icon: 'success',
                mask: true
              })
              uni.redirectTo({
                url: '/subPages/userIndex/rehabilitationAids/orthosesList'
              })
            },
            fail(res) {
              // 支付失败的回调
              uni.showToast({
                title: '支付失败',
                icon: 'none',
                duration: 2000
              })
              uni.redirectTo({
                url: '/subPages/userIndex/rehabilitationAids/orthosesList'
              })
            }
          })
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
  .total-amount {
    padding: 90rpx 0 180rpx;
    text-align: center;
    .text {
      margin-bottom: 16rpx;
      font-size: 24rpx;
      color: #999;
    }
    .amount {
      font-size: 80rpx;
      font-weight: 500;
      color: #000;
      .amount-icon {
        font-size: 40rpx;
      }
    }
  }
  .pay-type {
    padding: 0 30rpx;
    .type-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 34rpx 30rpx;
      border-radius: 20rpx;
      background-color: #FFF;
      .icon {
        width: 60rpx;
        height: 60rpx;
        margin-right: 16rpx;
        .img {
          width: 100%;
          height: 100%;
        }
      }
      .type-name {
        flex: 1;
      }
    }
  }
</style>
